/* 事件列表*/
<template>
  <div class="event labBox">
    <comTitle class="flex">
      <template class="flex-common" #title> 事件列表 </template>
    </comTitle>
    <div class="table">
      <div class="tableComonTop flex-common">
        <div class="option mr-16" v-if="falcutyOptions.length > 0">
          <selectName
            :selectArr="falcutyOptions"
            keys="facultyNo"
            label="facultyName"
            valueKey="facultyNo"
            :title="true"
            :value="formData.facultyNo"
            @dropDown="(val) => (formData.facultyNo = val)"
          >
            <div class="fs-16 cr-hui3">学院名称：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="laboratoryOptions.length > 0">
          <selectName
            :selectArr="laboratoryOptions"
            :title="true"
            keys="laboratoryNo"
            label="laboratoryName"
            valueKey="laboratoryNo"
            :value="formData.laboratoryNo"
            @dropDown="(val) => (formData.laboratoryNo = val)"
          >
            <div class="fs-16 cr-hui3">实验室：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="eventTypeOptions.length > 0">
          <selectName
            :selectArr="eventTypeOptions"
            :title="true"
            keys="id"
            label="name"
            valueKey="id"
            :value="formData.eventType"
            @dropDown="(val) => (formData.eventType = val)"
          >
            <div class="fs-16 cr-hui3">事件类型：</div>
          </selectName>
        </div>
        <div class="time">
          <Time
            :type="'datetimerange'"
            :title="true"
            :value="tableTimeValue"
            @valueChange="(event) => (tableTimeValue = event)"
          ></Time>
        </div>
        <div class="submit" @click="submit">导出</div>
      </div>
      <div class="tableDetail flex-common">
        <div class="detailIntem mr-38 fs-14 cr-hui3">
          自动检测事件
          <span
            class="familyD fs-18 cr-main ml-12 mr-6"
            style="color: #249ce9"
            >{{ sumAutomatic }}</span
          >
          <span class="cr-hui4 fs-12">件</span>
        </div>
        <div class="detailIntem mr-38 cr-hui3">
          人工上报事件
          <span
            class="familyD fs-18 cr-main ml-12 mr-6"
            style="color: #f1af24"
            >{{ sumArtificial }}</span
          >
          <span class="cr-hui4 fs-12">件</span>
        </div>
      </div>
      <scroll :height="80">
        <mergeTable :tableData="tableList" :tableConfig="config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="事件类型" slot="eventType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getEventType(row.eventType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="处理状态" slot="status">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getEventStatusType(row.status)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </scroll>

      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </div>
  </div>
</template>

<script>
import { eventListConfig } from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import { findPageByManage } from "@/http/api";
import exportInterface from "@/utils/exportInterface";
export default {
  name: "eventList",
  data() {
    return {
      exportInterface: exportInterface.exportInterface,
      tableCommonMethod: tableCommonMethod,
      falcutyOptions: [],
      laboratoryOptions: [],
      formData: {
        facultyNo: "",
        laboratoryNo: "",
        eventType: null,
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
      },
      eventTypeOptions: [
        {
          id: null,
          name: "全部",
        },
        {
          id: 1,
          name: "自动检测",
        },
        {
          id: 2,
          name: "人工上报",
        },
      ],
      total: 0,
      tableList: [],
      sumArtificial: 0,
      sumAutomatic: 0,
      config: eventListConfig,
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.falcutyOptions = JSON.parse(localStorage.getItem("departmentData"));
    this.laboratoryOptions = JSON.parse(localStorage.getItem("laboratoryData"));
    this.falcutyOptions.unshift({
      facultyNo: "",
      facultyName: "全部",
    });
    this.laboratoryOptions.unshift({
      laboratoryNo: "",
      laboratoryName: "全部",
    });
    this.initfindPageByManage();
  },
  methods: {
    // 事件列表
    async initfindPageByManage() {
      let params = {
        laboratoryNo: this.formData.laboratoryNo,
        facultyNo: this.formData.facultyNo,
        eventType: this.formData.eventType,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await findPageByManage(params);
      if (res.code === 20000) {
        this.tableList = res.data.pageResult.rows;
        this.total = res.data.pageResult.total;
        this.sumArtificial = res.data.sumArtificial;
        this.sumAutomatic = res.data.sumAutomatic;
      }
    },
    /* 确定按钮 */
    submit() {
      let params = {
        laboratoryNo: this.formData.laboratoryNo,
        facultyNo: this.formData.facultyNo,
        eventType: this.formData.eventType,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      this.exportInterface("findListByManage", params);
    },
    /* 确定按钮 */
    onPage(val) {
      this.formData.pageSize = val;
      this.initfindPageByManage();
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initfindPageByManage();
    },
    //弹起待审核
    statusHander() {
      this.wait.waitVisible = true;
    },
    // 待审核提交
    waitSubmit() {},
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initfindPageByManage();
      },
      deep: true,
    },
    "formData.facultyNo": {
      handler(val) {
        this.initfindPageByManage();
      },
      deep: true,
    },
    "formData.laboratoryNo": {
      handler(val) {
        this.initfindPageByManage();
      },
      deep: true,
    },
    "formData.eventType": {
      handler(val) {
        this.initfindPageByManage();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.event {
  padding: 0px 24px;
  height: 100% !important;
  .table {
    height: 95%;
    overflow: hidden;
  }
}
.tableDetail {
  margin-bottom: 20px;
}
.bottom-wrap {
  left: 48px !important;
  right: 48px !important;
  position: absolute;
  bottom: 20px;
}
.tableComonTop {
  height: 64px;
  .submit {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .input {
    height: 24px;
    line-height: 24px;
    margin-right: 20px;
    /deep/.el-input__inner {
      height: inherit !important;
      line-height: inherit !important;
    }
  }
}
</style>